/**
  * @prop --vm-settings-width: The width of the settings menu on desktop.
  * @prop --vm-settings-padding: The padding inside the settings menu.
  * @prop --vm-settings-shadow: The shadow cast around the settings menu frame.
  * @prop --vm-settings-border-radius: The border radius of the settings menu.
  * @prop --vm-settings-max-height: The max height of the settings menu.
  * @prop --vm-settings-scroll-width: The width of the settings scrollbar.
  * @prop --vm-settings-scroll-thumb-color: The color of the settings scrollbar thumb.
  * @prop --vm-settings-scroll-track-color: The color of the settings scrollbar track.
  * @prop --vm-settings-transition: The CSS transitions for the settings menu.
  */
:host {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--vm-menu-z-index);
}

.settings {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--vm-menu-bg);
  max-height: var(--vm-settings-max-height);
  border-radius: var(--vm-settings-border-radius);
  padding: var(--vm-settings-padding);
  box-shadow: var(--vm-settings-shadow);
  box-sizing: border-box;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  scrollbar-color: var(--vm-settings-scroll-thumb-color)
    var(--vm-settings-scroll-track-color);
  transform: translateY(8px);
  transition: var(--vm-settings-transition);
}

.container {
  display: block;
  width: var(--vm-settings-width);
  height: 100%;
  position: relative;
  transition: width 0.25s ease-in, height 0.25s ease-in;
}

.settings.hydrated {
  visibility: hidden !important;
}

.settings::-webkit-scrollbar {
  width: var(--vm-settings-scroll-width);
}

.settings::-webkit-scrollbar-track {
  background: var(--vm-settings-scroll-track-color);
}

.settings::-webkit-scrollbar-thumb {
  border-radius: var(--vm-settings-scroll-width);
  background-color: var(--vm-settings-scroll-thumb-color);
  border: 2px solid var(--vm-menu-bg);
}

.settings.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible !important;
}

.settings.mobile {
  position: fixed;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100%;
  min-height: 56px;
  max-height: 50%;
  border-radius: 0;
  z-index: 2147483647;
  transform: translateY(100%);
}

.settings.mobile.active {
  transform: translateY(0);
}

.settings.mobile > vm-menu {
  height: 100% !important;
  overflow: auto !important;
}
